import { BUS_THEME, BusDetail } from '@/apis/bus';
import ButtonzViewBus from '@/assets/button-viewd.png';
import Bg from '@/assets/choise-bg.jpg';
import Title from '@/assets/join-100.png';
import ButtonStart from '@/assets/join-99.png';
import ButtonDraw from '@/assets/success-2.png';
import BusNike from '@/components/Bus/Nike';
import BusZhuDi from '@/components/Bus/Zhudi';
import TweenOne from 'rc-tween-one';
import { useMemo } from 'react';
import { history, useQuery, useSearchParams } from 'umi';

import { getUserInfo } from '@/apis/user';
import FixedButtons from '@/components/FixedButtons';
import '@animxyz/core';
import { XyzTransitionGroup } from '@animxyz/react';

// ## 需要携带参数 busId=xx
export default function Page() {
  const [searchParams] = useSearchParams();
  const busId = searchParams?.get('busId');

  // ?车队信息
  const { data: bus, refetch: refetchBus } = useQuery(
    ['bus:detail'],
    () => BusDetail({ id: busId! }),
    {
      enabled: !!busId,
    },
  );

  // ?找到发起人
  const initiator = useMemo(() => bus?.passengers?.[0], [bus]);

  // ?找到自己
  const self = useMemo(() => bus?.passengers?.[1], [bus]);

  const { data: user } = useQuery(['get:user'], () => getUserInfo());

  return (
    <>
      <FixedButtons />
      <XyzTransitionGroup
        appear
        appearVisible
        xyz="fade up-2 appear-stagger"
        className=" min-h-screen relative overflow-hidden bg-cover bg-top pt-[100px]"
        style={{
          backgroundImage: `url(${Bg})`,
        }}
      >
        {/* title */}
        <h1
          className="w-[546px] h-[194px] bg-cover mx-auto"
          style={{
            backgroundImage: `url(${Title})`,
          }}
        ></h1>

        <div xyz="fade" className=" relative">
          <TweenOne
            animation={{
              type: 'from',
              x: window.innerWidth + 500,
              duration: 3000,
            }}
            className="busContainer w-[1400px] relative -left-[320px] mt-[70px]"
          >
            {bus?.theme === BUS_THEME.NIKE && (
              <BusNike
                readonly
                readonlyFriend
                selfAvatar={initiator?.head}
                friendAvatar={self?.head}
              />
            )}
            {bus?.theme === BUS_THEME.ZHUDI && (
              <BusZhuDi
                readonly
                readonlyFriend
                selfAvatar={initiator?.head}
                friendAvatar={self?.head}
              />
            )}
          </TweenOne>
        </div>

        {Boolean(user?.left_cj) && (
          <button
            onClick={() => history.push('/draw')}
            className="w-[382px] h-[128px] bg-cover active:scale-95 mx-auto block mb-2"
            style={{
              backgroundImage: `url(${ButtonDraw})`,
            }}
          />
        )}

        <button
          onClick={() => history.replace('/?restart=1')}
          className="w-[380px] h-[98px] bg-cover active:scale-95 mx-auto block mb-4"
          style={{
            backgroundImage: `url(${ButtonStart})`,
          }}
        />

        <button
          onClick={() => history.push('/route')}
          className="w-[380px] h-[98px] bg-cover active:scale-95 mx-auto block mb-4"
          style={{
            backgroundImage: `url(${ButtonzViewBus})`,
          }}
        />
      </XyzTransitionGroup>
    </>
  );
}
